<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f = "http://java.sun.com/jsf/core"
      >
    <h:body>
    	
    	<ui:composition template="/template/commonLayout.xhtml">
    	
    		<ui:define name="content">
	<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"/>
	<h4>Show Timeinterval <h:outputText value="#{employeeView.employee.username}" rendered="#{login.loggedIn}"/></h4>

	
	<h:form id="showIntervalsForm">
	
	
	
	
	<!-- 
	Einbinden von Funktionalität				
				
			Quelle: http://www.primefaces.org/showcase/ui/data/datatable/selection.xhtml 
	-->
	<p:dataTable id="intervalsTable" var="ints" value="#{timeIntervalView.allEmployeeIntervals}" selectionMode="single"
					 rowKey="#{ints.id}" selection="#{timeIntervalView.selectedTimeInterval}"> 
					 				
			<f:facet name="header">
				Intervalle
			</f:facet>
<!-- 

			Select Event Implementieren und Übergabe an PanelGrid:		-->	
			<p:ajax event="rowSelect" listener="#{timeIntervalView.onRowSelect}" update=":showIntervalsForm:detailPanel" />
		
			<p:column headerText="ID">
				<h:outputText value="#{ints.id}" />
			</p:column>
			
			<p:column headerText="Datum">
				<h:outputText value="#{ints.from}" />
			</p:column>
				
	</p:dataTable>
	
	<br />
	<br />
	
	<!-- 
	Daten von ausgewählten Objekt aus DataTable in PanelGrid übernehmen
	 -->
	<p:panelGrid columns="2" id="detailPanel" style="width:100%;">
		<f:facet name="header">
			Details
		</f:facet>
		
		<h:outputText value="ID:" />
		<h:outputText value="#{timeIntervalView.selectedTimeInterval.id}" />
		
		
		<h:outputText value="Datum Ab" />
		<h:outputText value="#{timeIntervalView.selectedTimeInterval.from}" />
		
		
		<h:outputText value="Datum Bis" />
		<h:outputText value="#{timeIntervalView.selectedTimeInterval.to}" />
		
		
		<h:outputText value="Kommentar" />
		<h:outputText value="#{timeIntervalView.selectedTimeInterval.comment}" />
		
		
		<h:outputText value="Aktivität" />
		<h:outputText value="#{timeIntervalView.selectedTimeInterval.activity.description}" />
		
		<p:commandButton action="#{timeIntervalView.deleteTimeInterval(timeIntervalView.selectedTimeInterval.id)}" value="delete" >
			<p:confirm header="Bestätigen" message="Sind Sie sicher?" icon="ui-icon-alert" />
		</p:commandButton>
		<h:outputText value="" />
		
		
		
	</p:panelGrid>
	
	<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
			<p:commandButton value="Ja" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
			<p:commandButton value="Nein" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
	</p:confirmDialog>
		
	
	
	</h:form>
	
	</ui:define>    		
    	</ui:composition>
    	
    </h:body>

</html>